<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript简易日历</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
window.onload=function()
{
	var oDiv=document.getElementById('tab');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLi=oUl.getElementsByTagName('li');
	var aDiv=oDiv.getElementsByTagName('div')[0];
	var i=0;
	var arr=['上学',
	'toscroos',
	'play',
	'after',
	'つらまない',
	'知らない',
	'cook',
	'teacher',
	'look',
	'after',
	'つらまない',
	'知らない',
	
	
	]
	for(i=0;i<aLi.length;i++)
	{
	  aLi[i].index=i;
	  aLi[i].onmouseover=function()
	  {
		for(i=0;i<aLi.length;i++)  
		{
		 aLi[i].className='';	
		}
		this.className='active';
		aDiv.innerHTML='<h2>'+(this.index+1)+'月活动'+'</h2>'+'<p>'+arr[this.index]+'</p>';
	  }
	  
	  
	  	
	}
};
</script>
</head>

<body>

<div id="tab" class="calendar">
    <ul>
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>
    
    <div class="text">
        <h2>1月活动</h2>
        <p>上学</p>
    </div>

</div>

</body>
</html>
